import SvgIcon from "@/components/SvgIcon/index";
import useAppStore from "@/store/modules/app";
import { useI18n } from "vue-i18n";
import "./index.scss";
export default defineComponent({
  props: {
    id: {
      type: String,
      default: "",
    },
    class: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const appStore = useAppStore();
    const size = computed(() => appStore.size);
    const { t } = useI18n();
    const sizeOptions = ref([
      { label: "较大", value: "large" },
      { label: "默认", value: "default" },
      { label: "稍小", value: "small" },
    ]);
    const handleSetSize = (size: string) => {
      appStore.setSize(size);
    };
    return () => (
      <>
        <el-dropdown
          trigger="click"
          onCommand={handleSetSize}
          id={props.id}
          class={props.class}
        >
          {{
            default: () => (
              <div class="size-icon--style">
                <SvgIcon className="size-icon" iconClass="size" />
              </div>
            ),
            dropdown: () => (
              <el-dropdown-menu>
                {sizeOptions.value.map((item) => (
                  <el-dropdown-item
                    key={item.value}
                    disabled={size.value === item.value}
                    command={item.value}
                  >
                    {item.label}
                  </el-dropdown-item>
                ))}
              </el-dropdown-menu>
            ),
          }}
        </el-dropdown>
      </>
    );
  },
});
